<template>
  <a-card>
    
      <a-space class="operator">
        <a-button  type="primary">新建</a-button>
        <!-- <a-button >批量操作</a-button> -->
        <a-dropdown>
          <a-menu @click="handleMenuClick" slot="overlay">
            <!-- <a-menu-item key="delete">删除</a-menu-item>
            <a-menu-item key="audit">审批</a-menu-item> -->

            <a-menu-item key="toLead">
              <a-icon type="upload" />导入
              <input
                type="file"
                title=""
                @change="fileChange"
                v-show="false"
                id="upload"
              />
            </a-menu-item>

            <a-menu-item key="toOut">
              <a-icon type="vertical-align-bottom" />导出
            </a-menu-item>
          </a-menu>
          <a-button> 更多操作 <a-icon type="down" /> </a-button>
        </a-dropdown>
      </a-space>
      <!-- <standard-table
        :columns="columns"
        :dataSource="dataSource"
        :selectedRows.sync="selectedRows"
        @clear="onClear"
        @change="onChange"
        @selectedRowChange="onSelectChange"
      >
        <div slot="description" slot-scope="{ text }">
          {{ text }}
        </div>
        <div slot="action" slot-scope="{ text, record }">
        </div>
        <template slot="statusTitle">
          <a-icon @click.native="onStatusTitleClick" type="info-circle" />
        </template>
      </standard-table> -->
      <!-- <div class="table-adv"> -->
      <advance-table
      :columns="columns"               
      :data-source="dataSource"
      :title="tableTitle" 
      :loading="loading"
      rowKey="id"
      @search="onSearch"
      @refresh="onRefresh"
      :format-conditions="true"
      @reset="onReset" 
      :bordered="true"
      :scroll="{ x: 1300}"
      :pagination="false"
    >

   

      <template slot="statusTitle">
        状态<a-icon style="margin: 0 4px" type="info-circle" />
      </template>
      <template slot="send" slot-scope="{text}">
        {{text ? '是' : '否'}}
      </template>
      <template slot="status" slot-scope="{text}">
        {{text | statusStr}}
      </template>
    </advance-table>


    <div class="show-right">
     <a-pagination
        :current="page"                   
        :pageSize="pageSize"                
        :total="total"                       
        :showSizeChanger="true"             
        :showLessItems="true"                 
        :showQuickJumper="true"             
        :pageSizeOptions="['20', '50', '100', '500','']"
        :showTotal="(total, range) => `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`"  
        :onChange="onPageChange"                                                          
        :onShowSizeChange="onSizeChange"                                                  
  >
    <template slot="buildOptionText" slot-scope="props">
      <span v-if="props.value !== ''">{{ props.value }}条/页</span>
      <span v-else>全部</span>
    </template>
  </a-pagination>
  </div>



    <!-- </div> -->
  </a-card>
</template>

<script>
// import StandardTable from "@/components/table/StandardTable";
import AdvanceTable from '@/components/table/advance/AdvanceTable'
import { teachingUpload,teachingList } from "@/services/teaching-culture";




export default {
  name: "TeachingCulture",
  components: { AdvanceTable },
  filters: {
      statusStr(val) {
        switch (val) {
          case 1: return '已下单'
          case 2: return '已付款'
          case 3: return '已审核'
          case 4: return '已发货'
        }
      }
    },
  data() {
    return {                                               
        loading: false,                                      //表格是否加载中
        page: 1,                                           //第几页
        pageSize: 20,                                      //一页多少条
        total: 0,                                          //总共多少条
        tableTitle:' ',                                    //表格标题
        columns: [                                         //显示什么列
          {
            title: '商品名称',
            dataIndex: 'name',
            width:300,
            searchAble: true
          },
          
          {
            title: '订单号',
            dataIndex: 'orderId'
          },
        
          {
            // searchAble: true,
            dataIndex: 'status',
            dataType: 'select',
            slots: {title: 'statusTitle'},
            scopedSlots: {customRender: 'status'},
            search: {
              selectOptions: [
                {title: '已下单', value: 1},
                {title: '已付款', value: 2},
                {title: '已审核', value: 3},
                {title: '已发货', value: 4}
              ]
            }
          },
          {
            title: '发货',
            // searchAble: true,
            dataIndex: 'send',
            dataType: 'boolean',
            scopedSlots: {customRender: 'send'},
            search: {
              switchOptions: {
                checkedText: '开',
                uncheckedText: '关'
              }
            }
          },
          {
            title: '审核时间',
            dataIndex: 'auditTime',
            dataType: 'time',
          },
           {
          title: 'operation',
          dataIndex: 'operation',
             fixed: 'right',
          scopedSlots: { customRender: 'operation' },
        },
        ],
        dataSource: [],    //显示的数据
        conditions: {}     //条件
    };
  },
  authorize: {
    deleteRecord: "delete",
  },
  created() {
    // this.getColumns()
    this.tableLoad()
  },
  methods: {
   onSearch(conditions, searchOptions) {
        //console.log(searchOptions)
        this.page = 1
        this.conditions = conditions
        this.getGoodList()
      },
      onSizeChange(current, size) {
        this.page = 1
        this.pageSize = size
        this.getGoodList()
      },
      onRefresh(conditions) {
        this.conditions = conditions
        this.getGoodList()
      },
      onReset(conditions) {
        this.conditions = conditions
        this.getGoodList()
      },
      onPageChange(page, pageSize) {
        this.page = page
        this.pageSize = pageSize
        this.getGoodList()
      },
     
    fileChange(e) {
      const { uploading, $message } = this;
      let files = e.target.files[0];
      let formData = uploading(files, "excel", "teaching_culture");
      if (formData) {
        //  teachingUpload
        this.$confirm({
          title: "确定要导入吗?",
          // content: 'When clicked the OK button, this dialog will be closed after 1 second',
           onOk() {
          $message.loading({ content: "导入中", key: "loading" });
          teachingUpload(formData).then(res => {
              if(res.code == 200){
                 $message.success({
                 content: "导入成功",
                 key: "loading",
                 duration: 2,
                });
              }else{
                 $message.error({
                 content: "导入失败",
                 key: "loading",
                 duration: 2,
                });
              }
            }).catch(error=>{
               $message.error({
                 content: "导入失败",
                 key: "loading",
                 duration: 2,
                });
            });
          }
        });

         var file = document.getElementById('upload');
         file.value = '';; //重置了file的outerHTML

      }
      // //console.log(formData);
    },

    getColumns() {
    this.columns =   []
      },

    
    async tableLoad(){
    this.loading = true
 const {list, total}  =       {
  
    "total": 100,
    "list": [
        {
            "id": 0,
            "name": "运动鞋",
            "name1": "运动鞋",
            "name2": "运动鞋",
            "orderId": "1636265907834-41",
            "status": 2,
            "send": true,
            "sendTime": "2003-01-07 15:12:03",
            "orderDate": "1982-07-28",
            "auditTime": "19:19:38"
        },
        {
            "id": 1,
            "name": "短裤",
            "orderId": "1636265907834-19",
            "status": 3,
            "send": false,
            "sendTime": "1980-10-11 08:07:55",
            "orderDate": "2018-05-02",
            "auditTime": "22:36:41"
        },
        {
            "id": 2,
            "name": "T恤",
            "orderId": "1636265907834-26",
            "status": 3,
            "send": false,
            "sendTime": "2015-11-15 08:05:15",
            "orderDate": "1987-11-22",
            "auditTime": "17:09:42"
        },
        {
            "id": 3,
            "name": "运动鞋",
            "orderId": "1636265907834-15",
            "status": 1,
            "send": false,
            "sendTime": "2012-09-22 18:52:55",
            "orderDate": "2005-02-27",
            "auditTime": "12:24:55"
        },
        {
            "id": 4,
            "name": "七分裤",
            "orderId": "1636265907834-75",
            "status": 3,
            "send": false,
            "sendTime": "2018-01-20 11:57:55",
            "orderDate": "2011-03-30",
            "auditTime": "22:47:18"
        },
        {
            "id": 5,
            "name": "T恤",
            "orderId": "1636265907834-97",
            "status": 2,
            "send": false,
            "sendTime": "1982-02-09 12:25:21",
            "orderDate": "1974-09-29",
            "auditTime": "15:19:54"
        },
        {
            "id": 6,
            "name": "短裤",
            "orderId": "1636265907834-40",
            "status": 2,
            "send": true,
            "sendTime": "1985-01-16 04:19:36",
            "orderDate": "2006-12-24",
            "auditTime": "00:50:41"
        },
        {
            "id": 7,
            "name": "运动鞋",
            "orderId": "1636265907834-14",
            "status": 1,
            "send": true,
            "sendTime": "1980-05-24 09:49:11",
            "orderDate": "1980-03-09",
            "auditTime": "03:25:32"
        },
        {
            "id": 8,
            "name": "短裤",
            "orderId": "1636265907834-26",
            "status": 4,
            "send": true,
            "sendTime": "2006-08-22 21:30:47",
            "orderDate": "2000-08-20",
            "auditTime": "04:15:16"
        },
        {
            "id": 9,
            "name": "七分裤",
            "orderId": "1636265907834-71",
            "status": 3,
            "send": true,
            "sendTime": "2021-07-19 04:55:33",
            "orderDate": "2011-01-12",
            "auditTime": "07:34:53"
        }
    ]
}


          this.dataSource = list
          // this.page = page
          this.total = total
          // this.pageSize = pageSize
          this.loading = false


    },

    handleMenuClick(e) {
     if (e.key === "toLead") {    //导入
        let upload = document.getElementById("upload");

        upload.click();
      }
    },
  },
};
</script>

<style lang="less" scoped>


.table-adv{
  max-width: 100%;
  // border: 1px solid blue;
  overflow: auto;
  white-space:nowrap
}

.show-right{
   float: right;
   margin-top:10px ;
}
</style>
